<template>
  <div class="data-lister">
    <ul v-if="dataArr.length">
      <li
        v-for="({ name, done }, index) in dataArr"
        :class="{ item: true, done: done }"
      >
        <span>{{ name }}</span>

        <slot :toggleItemState="toggleItemState" :index="index">
          <button @click="deleteItem(index)">删除</button>
        </slot>
      </li>
    </ul>

    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script setup>
const { dataArr, toggleItem } = defineProps(["dataArr", "toggleItem"]);
console.log("dataArr=", dataArr);

const emit = defineEmits(["deleteItem"]);
const deleteItem = (index) => {
  console.log("deleteItem", index);

  // 给爹发个自定义事件 让爹删除之
  emit("deleteItem", index);
};

const toggleItemState = (index) => {
  console.log("儿子 toggleItemState", index);

  // 给爹发个自定义事件 让爹删除之
  // emit("deleteItem", index);

  // 调用父组件以props形式传入的函数
  toggleItem(index);
};
</script>

<style lang="scss" scoped>
.data-lister {
  margin-top: 10px;

  ul {
    li {
      height: 35px;
      line-height: 35px;
      border-bottom: 1px solid #eee;
      display: flex;
      padding: 2px 0 2px 5px;

      span {
        flex: 1;
      }

      button {
        width: 100px;
        height: 100%;
      }
    }

    li.done {
      span {
        text-decoration: line-through;
      }
    }
  }

  .no-data {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #ccc;
    border: 1px solid #eee;
    border-radius: 5px;
  }
}
</style>
